<!-- 混酸报表 -->
<template>
  <div class="report-tab">
    <px-radio-group v-model="reportTab" @change="changeTab">
      <px-radio-button label="混酸结果" />
      <px-radio-button label="混酸记录" />
      <px-radio-button label="混酸系数" />
    </px-radio-group>
  </div>
  <div v-if="reportTab !== '混酸系数'" class="flex-center table-top">
    <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
      <px-form-item label="化学品" prop="chemical">
        <px-select
          v-model="queryParams.chemical"
          style="width: 260px"
          clearable
          filterable
          remote
          reserve-keyword
          remote-show-suffix
          :remote-method="remoteMethod"
          :loading="chemicalLoading"
          placeholder="请输入化学品"
        >
          <px-option v-for="item in chemicalOptions" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="日期" prop="date">
        <px-date-picker v-model="queryParams.date" style="width: 260px" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
      </px-form-item>
      <div class="search-form-btn">
        <px-button type="primary" @click="handleQuery">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
      </div>
    </px-form>
  </div>

  <div v-if="reportTab === '混酸结果'" ref="tableBoxRef" v-loading="tableLoading" class="table-content">
    <px-table :data="resultTableData" size="small" border class="common-table" :height="scrollbarHeight">
      <px-table-column type="index" label="序号" fixed width="55" align="center" />
      <px-table-column prop="chemical" label="化学品" min-width="120" fixed show-overflow-tooltip />
      <px-table-column prop="unit" label="单位" min-width="80" fixed show-overflow-tooltip />
      <px-table-column prop="deviceCode" label="设备" min-width="120" show-overflow-tooltip />
      <px-table-column
        v-for="(item, index) in dateList"
        :key="item.date"
        prop="date"
        :label="`${item.date}(${item.week})`"
        min-width="140"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span>
            {{ scope.row.statValueList[index].num }}
          </span>
        </template>
      </px-table-column>
    </px-table>
  </div>

  <div v-if="reportTab === '混酸记录'" ref="tableBoxRef" v-loading="tableLoading" class="table-content">
    <px-table :data="recordTableData" size="small" border class="common-table" :height="scrollbarHeight">
      <px-table-column type="index" label="序号" fixed width="55" align="center" />
      <px-table-column prop="statDate" label="日期" fixed min-width="120" show-overflow-tooltip />
      <px-table-column prop="chemical" label="化学品" fixed min-width="120" show-overflow-tooltip />
      <px-table-column prop="deviceCode" label="设备" fixed min-width="120" show-overflow-tooltip />
      <px-table-column prop="remainingWeight" label="1st剩余量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.remainingWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="totalWeight" label="1st总重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.totalWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st加水目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.addWaterTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st加水实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.addWaterActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st原液目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.stosteTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st原液实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.stosteActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st目标稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.targetDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st实际稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.actualDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st原液设定浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.stosteSettingConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="1st原液目标浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[0]?.stosteTargetConcentration ?? "" }}
        </template>
      </px-table-column>

      <px-table-column prop="equip" label="2nd剩余量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.remainingWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd总重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.totalWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd加水目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.addWaterTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd加水实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.addWaterActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd原液目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.stosteTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd原液实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.stosteActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd目标稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.targetDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd实际稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.actualDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd原液设定浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.stosteSettingConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="2nd原液目标浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[1]?.stosteTargetConcentration ?? "" }}
        </template>
      </px-table-column>

      <px-table-column prop="equip" label="3rd剩余量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.remainingWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd总重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.totalWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd加水目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.addWaterTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd加水实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.addWaterActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd原液目标重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.stosteTargetWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd原液实际重量" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.stosteActualWeight ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd目标稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.targetDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd实际稀释浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.actualDilutedConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd原液设定浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.stosteSettingConcentration ?? "" }}
        </template>
      </px-table-column>
      <px-table-column prop="equip" label="3rd原液目标浓度" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.mixedAcidValueDTOList[2]?.stosteTargetConcentration ?? "" }}
        </template>
      </px-table-column>
    </px-table>
  </div>

  <div v-if="reportTab === '混酸系数'" ref="tableBoxRef" v-loading="tableLoading" class="table-content">
    <px-table :data="coefficientTableData" size="small" border class="common-table" :height="scrollbarHeight">
      <px-table-column type="index" label="序号" fixed width="55" align="center" />
      <px-table-column prop="chemical" label="化学品" min-width="120" show-overflow-tooltip />
      <px-table-column prop="coefficient" label="系数" min-width="120" show-overflow-tooltip />
      <px-table-column label="操作" width="100" fixed="right" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button
              v-has="`GAS_CONSUMPTION_CHEMICAL_COEFFICIENT_EDIT_BTN`"
              link
              icon="EditPen"
              type="primary"
              @click="handleEditCoefficient(scope.row)"
            />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
  </div>

  <px-dialog v-model="editDialogVisible" title="编辑" width="400">
    <px-form ref="editFormRef" :model="editFormParams">
      <px-form-item label="系数" prop="coefficient">
        <px-input v-model.trim="editFormParams.coefficient" placeholder="请输入" clearable />
      </px-form-item>
    </px-form>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancelEdit">取消</px-button>
        <px-button type="primary" @click="saveEdit">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue";
import { getBeforeDate, getWeek } from "../../utils.js";
import { getMixedResultAPI, getMixedRecordAPI, getCoefficientListAPI, updateCoefficientAPI } from "@/api/consumption/chemical";
import { queryAllChemicalName } from "@/api/modules/operation";
import { PxMessage } from "px-ui";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

defineOptions({
  name: "GAS_CONSUMPTION_CHEMICAL_MIXEDACIDREPORT"
});

const formRef = ref(null);
const editFormRef = ref(null);

const gap = 40;
const defaultHeight = 606;
const scrollbarHeight = ref<number>(defaultHeight);
const tableBoxRef = ref<HTMLElement | null>(null);
const chemicalLoading = ref<boolean>(false);
const chemicalOptions = ref<Array<any>>([]);

const state = reactive({
  reportTab: "混酸结果",
  queryParams: {
    chemical: "",
    date: ""
  },
  tableLoading: false,
  resultTableData: [],
  recordTableData: [],
  coefficientTableData: [],
  dateList: [],
  editFormParams: {
    coefficient: null
  },
  editDialogVisible: false,
  editRowData: {}
});
const {
  reportTab,
  queryParams,
  tableLoading,
  resultTableData,
  recordTableData,
  coefficientTableData,
  dateList,
  editFormParams,
  editDialogVisible,
  editRowData
} = toRefs(state);

const remoteMethod = async (searchKey: string) => {
  if (searchKey) {
    chemicalLoading.value = true;
    const res = await queryAllChemicalName({ searchKey }, () => {
      chemicalLoading.value = false;
    });
    chemicalOptions.value = res;
    chemicalLoading.value = false;
  } else {
    chemicalOptions.value = [];
  }
};

onMounted(async () => {
  handleQuery();
  await useUpdateDomHeight(scrollbarHeight, tableBoxRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

// 查询
const handleQuery = async () => {
  changeQuery(state.reportTab);
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

const changeTab = async tab => {
  changeQuery(tab);
  await useUpdateDomHeight(scrollbarHeight, tableBoxRef, gap, defaultHeight);
};

const changeQuery = data => {
  if (data === "混酸结果") {
    getResultList();
  } else if (data === "混酸记录") {
    getRecordList();
  } else if (data === "混酸系数") {
    getCoEfficientList();
  }
};

// 查询混酸结果
const getResultList = async () => {
  try {
    state.tableLoading = true;
    const { chemical, date } = state.queryParams;
    const params = {
      chemical: chemical,
      searchDate: date
    };
    state.resultTableData = await getMixedResultAPI(params);
    let arr = [];
    let d = null;
    if (date === "" || date === null) {
      d = 0;
    } else {
      d = date;
    }
    // 这边默认取的是今天往前7天，包含今天
    for (let i = 6; i > -1; i--) {
      arr.push({
        date: getBeforeDate(i, d),
        week: getWeek(getBeforeDate(i, d))
      });
    }
    state.dateList = arr;
  } catch (err) {
    console.log(err);
  } finally {
    state.tableLoading = false;
  }
};

// 查询混酸记录
const getRecordList = async () => {
  try {
    state.tableLoading = true;
    const { chemical, date } = state.queryParams;
    const params = {
      chemical: chemical,
      searchDate: date
    };
    state.recordTableData = await getMixedRecordAPI(params);
  } catch (err) {
    console.log(err);
  } finally {
    state.tableLoading = false;
  }
};

// 查询混酸系数
const getCoEfficientList = async () => {
  try {
    state.tableLoading = true;
    const { chemical, date } = state.queryParams;
    const params = {
      chemical: chemical,
      searchDate: date
    };
    state.coefficientTableData = await getCoefficientListAPI(params);
  } catch (err) {
    console.log(err);
  } finally {
    state.tableLoading = false;
  }
};

// 编辑混酸系数
const handleEditCoefficient = row => {
  state.editRowData = row;
  state.editFormParams = {
    coefficient: row.coefficient
  };
  state.editDialogVisible = true;
};

// 取消编辑
const cancelEdit = () => {
  editFormRef.value.resetFields();
  state.editDialogVisible = false;
};

// 保存编辑
const saveEdit = async () => {
  const { chemical } = state.editRowData;
  const params = {
    chemical,
    coefficient: state.editFormParams.coefficient
  };
  await updateCoefficientAPI(params);
  cancelEdit();
  handleQuery();
  PxMessage.success("修改成功");
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");

.report-tab {
  margin-bottom: 16px;
}
</style>
